<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单据查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .sidebar {
            max-width: 600px;
            margin: 0 auto;
        }
        h1,form {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        label {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        label {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="sidebar" th:replace="twoGroup/twoGroup.html"></div>
<div class="sidebar" th:replace="twoGroup/twoGroup.html"></div>
<div th:replace="twoGroup/twoGroupmain.html"></div>
<h1>单据查询</h1>

<form action="/outcomes" method="post">
    <label for="documentNumber">单据编号:</label>
    <input type="text" id="documentNumber" name="documentNumber" required>

    <label for="customerName">客户名称:</label>
    <input type="text" id="customerName" name="customerName">

    <label for="shipDateFrom">发货日期从:</label>
    <input type="date" id="shipDateFrom" name="shipDateFrom">

    <label for="shipDate">收货日期:</label>
    <input type="date" id="shipDate" name="shipDate">

    <button type="submit">查询</button>
</form>

<div id="results">
    <!-- 查询结果将在这里显示 -->
</div>

<script>
    // 假设这是一个简单的前端JavaScript代码，用于在查询后展示结果
    // 实际上，这样的逻辑应该在后端处理，并通过API返回结果
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        var formData = new FormData(event.target);
        var resultsDiv = document.getElementById('results');

        // 假设这是向后端发送请求的代码
        // 在实际应用中，你应该使用Fetch API、Axios或其他库来发送HTTP请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', formData.get('action'), true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resultsDiv.innerHTML = xhr.responseText; // 假设后端返回的是HTML
            }
        };
        xhr.send(new URLSearchParams(formData).toString());
    });
    <a herf="/outcomes">查询</a>
    <a herf="http://127.0.0.1:8086/dynamic">返回</a>
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
</html>